<!--
 * @Description: 普通输入框,占一行，左侧标签右侧输入框
 * @Author: jzx
 * @Date: 2019-07-13 10:12:42
 * @LastEditTime: 2019-09-02 14:52:41
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class='input_container'>
    <span :class="required ? 'required_formItem' : ''">
      {{label ? label : ''}}
    </span>
    <div class="field">
      <input
        :value="defaultValue"
        :disabled='readonly'
        :type="_type"
        :maxlength='maxLength'
        :placeholder="readonly ? '' : placeholder"
        @blur="blur"
        @focus="focus"
        @input="input"
        />
      <img v-if='isClearable' @click='clear' src='/static/images/mine/_orderingUnit/_input/clear.png'/>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    value: '',
    label: String,
    _type: {
      type: String,
      default: 'text'
    },
    readonly: Boolean,
    placeholder: String,
    clearable: Boolean,
    required: Boolean,
    maxLength: String
  },
  data () {
    return {
      defaultValue: '',
      isClearable: false
    }
  },
  watch: {
    value (value) {
      this.defaultValue = value
    },
    // 编辑状态默认显示叉号,内容为空当然不用显示
    readonly (value) {
      if (this.defaultValue) {
        if (!value) {
          this.isClearable = true
        } else {
          this.isClearable = false
        }
      }
    }
  },
  beforeMount () {
    this.defaultValue = this.value
  },
  methods: {
    blur () { // 开发者工具和模拟器不一样
      this.isClearable = false
    },
    focus () {
      this.isClearable = !!this.defaultValue
    },
    clear () {
      this.defaultValue = ''
      this.isClearable = false
      setTimeout(() => { // 异步去赋值可防止数值抖动
        this.$emit('input', this.defaultValue)
      }, 0)
    },
    input (event) {
      this.defaultValue = event.target.value
      this.focus()
      setTimeout(() => { // 异步去赋值可防止数值抖动
        this.$emit('input', event.target.value)
      }, 0)
    }
  }
}
</script>
<style scoped>
  .required_formItem:before{
    content: '*';
    color: #FA4943;
  }
  .input_container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #FFFFFF;
    border-bottom: 1rpx solid #ebedf0;
    box-sizing: border-box;
    padding: 20rpx 40rpx 20rpx 10rpx;
    margin-left: 20rpx;
    text-align: right;
  }
  .field {
    display:flex;
    align-items:center;
    width: 60%;
  }
  .field input {
    width: 100%;
  }
  .field image {
    width: 35rpx;
    height: 35rpx;
    margin-left: 10rpx;
  }
  .input_container image {
    width:30rpx;
    height:30rpx;
  }
</style>
